<template>
  <!-- 接处警监管 -->
  <div class="content-item contact-police-supervision">
    <div class="content-item-title">接处警监管</div>
    <div class="content-item-wrap" style="margin-top:20px;">
      <!-- 环形图 -->
      <div class="ring-diagram-wrap">
        <div id="myChart-contact-police-supervision" :style="{width: '250px', height: '140px'}"></div>
        <div class="classification">
            <p>实时警情<span class="num blue">{{countObj.totalCount}}</span></p>
            <p>未处理警情<span class="num blue">{{countObj.unHandlerCount}}</span></p>
            <!-- <p>已处理警情<span class="num black">{{countObj.handlerCount}}</span></p> -->
        </div>
      </div>
      <!-- 流程图 -->
      <div class="flow-chart-wrap">
        <!-- 系统推送 -->
        <div class="step-wrap system-push">
            <p>报警<span class="num alarms-num red">{{countObj.fireAlarmCount}}</span></p>
            <p>故障<span class="num failures-num yellow">{{countObj.faultAlarmCount}}</span></p>
            <p>联动<span class="num action-num blue">{{countObj.linkageAlarmCount}}</span></p>
            <p>屏蔽<span class="num shield-num blue">{{countObj.shieldAlarmCount}}</span></p>
        </div>
        <!-- 领取任务 -->
        <div class="step-wrap recieve-task">
            <p>已领取<span class="num received-num blue">{{countObj.receiveNum}}</span></p>
            <p>未领取<span class="num unaccalimed-num blue">{{countObj.unReceiveNum}}</span></p>
        </div>
        <!-- 已处理 -->
        <div class="step-wrap processed">
            <p>真实火警<span class="num realfire-num red">{{countObj.realAlarmResult}}</span></p>
            <p>误报<span class="num falsepositive-num blue">{{countObj.wrongAlarmResult}}</span></p>
            <p>测试<span class="num test-num blue">{{countObj.testAlarmResult}}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAlarmTotalCount} from '@/api/home'

export default {
  name: 'ContactPoliceSupervision',
  data () {
    return {
      countObj: {}
    }
  },
  created () {
    this.getAlarmData()
  },
  methods: {
    getAlarmData() {
      let that = this
      let params = {
        orgIds: that.$store.state.userinfo.organizationIds,
        dataType: 0
      }
      getAlarmTotalCount(params).then(res => {
        that.countObj = res.data
        that.initEcharts({
          unHandlerCount: res.data.unHandlerCount,
          handlerCount: res.data.handlerCount
        })
      })
    },
    initEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      let $dom = document.getElementById('myChart-contact-police-supervision');
      if($dom)
        this.$echarts.init($dom).setOption({
          color: ['#2876D1', '#D84553'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name:'实时警情',
              type:'pie',
              radius: ['68%', '86%'],
              avoidLabelOverlap: false,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      show: false 
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[
                  {value:data.handlerCount, name:'已处理警情'},
                  {value:data.unHandlerCount, name:'未处理警情'}
              ]
            }
          ]
        });
    },
    // 更新/刷新模块
    refreshModel(data) {
      let that = this
      if(Object.keys(data).length > 0) {
        that.countObj = data
        that.initEcharts({
          unHandlerCount: data.unHandlerCount,
          handlerCount: data.handlerCount
        })
      } else {
        that.getAlarmData()
      }
    }
  }
}
</script>

<style>
.contact-police-supervision .content-item-wrap {
    display: flex;
    margin-top: 20px;
    border: 1px solid rgb(189,189,189, .6);
    height: 300px;
}
.ring-diagram-wrap {
    width: 250px;
    height: 258px;
    background: url(../../../assets/images/home/ring-diagram.png) center 51px no-repeat;
    background-size: 30px;
}
.ring-diagram-wrap .classification {
    margin-top: 10px;
    margin-left: 70px;
    width: 100%;
}
.ring-diagram-wrap .classification p {
    display: flex;
    justify-content: space-between;
    width: 150px;
    font-size: 16px;
    line-height: 34px;
    color: #999;
}

.flow-chart-wrap {
    position: relative;
    border-left: 1px solid #E1E1E1;
    width: 950px;
    height: 100%;
    background: url(../../../assets/images/home/flow-bg.png) center center no-repeat;
    background-size: 830px;
}

.flow-chart-wrap .step-wrap {
    position: absolute;
}
.flow-chart-wrap .step-wrap p {
    color: #999;
    font-size: 16px;
    line-height: 28px;
}

.flow-chart-wrap .step-wrap .num {
    margin-left: 10px;
}
.system-push {
    top: 145px;
    left: 245px;
}
.recieve-task {
    top: 110px;
    left: 447px;
}
.processed {
    top: 145px;
    left: 645px;
}
</style>
